<template>
  <div>
<!--
carousel: {
      sysCar: '系统管理—轮播图',
      name: '名称',
      image: '图片',
      upName: '上传人',
      info: '描述',
      upTime: '上传时间',
      stopTime: '停用时间',
      stop: '停用',
      start: '启用',
      search: '搜索',
      newCar: '新增',
      newCarTitle: '新增轮播图',
      sort: '排序',
      upImage: '上传图片'
    },
-->
    <div class="page-header">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="page-header__title">{{$t('pages.carousel.sysCar')}}</div>
        </el-col>
        <el-col :span="16" class="text-right">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="区域">
              <el-select v-model="area" :style="{width: '120px'}">
              <el-option label="总部" :value="0"></el-option>
              <el-option label="区域" :value="1"></el-option>
              </el-select>
            </el-form-item>

            <!-- <el-form-item label="状态">
              <el-select v-model="status" :style="{width: '120px'}" @change="getDataList">
                <el-option label="待维护" :value="1"></el-option>
                <el-option label="已发布" :value="2"></el-option>
                <el-option label="所有" :value="3"></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item>
              <el-input
                @keydown.native.13="getDataList"
                :placeholder="$t('pages.help.input_search_placeholder')"
                v-model="formInline.keyword">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
            </el-form-item>

            <!-- <el-button type="danger"  @click="getDataList()">{{$t('pages.carousel.search')}}</el-button> -->
            <el-button type="primary" icon="el-icon-plus" @click="newHandle()">{{$t('pages.carousel.newCar')}}</el-button>

          </el-form>
        </el-col>
      </el-row>
    </div>

    <carousel-table
      @editHandle="editHandle"
      @current-change="currentChange"
      @releaseHandle="releaseHandle"
      @delete="deleteHandle"
      @start="startHandle"
      @stop="stopHandle"
      :dataList="dataList"
      
      :pageIndex="pageIndex"
      :pageSize="pageSize"
      :totalPage="totalPage"
      typeCar="all"></carousel-table>

    <!--编辑、新增-->
    <el-dialog :title="action === 'newsAc' ?
      $t('pages.carousel.newCarTitle') :
      $t('pages.carousel.detalCarTitle')"
               :close-on-click-modal="false"
               :visible.sync="visible"
               class="carouselDialog"
               @close="onClose">
      <el-form :validate-on-rule-change="false"
               ref="dialogForm"
               @keyup.enter.native.prevent="ok"
               :rules="dataRule"
               :model="current" label-width="80px">
        <el-form-item  :label="$t('pages.carousel.name')" prop="name">
          <el-input :placeholder="$t('pages.carousel.name')" v-model="current.name" />
        </el-form-item>

        <el-form-item  :label="$t('pages.carousel.sort')" prop="sort">
          <el-input :placeholder="$t('pages.carousel.sort')" v-model="current.sort" />
        </el-form-item>

        <el-form-item :label="$t('pages.carousel.info')" prop="info">
          <el-input :autosize="{ minRows: 4, maxRows: 6}"
                    type="textarea"
                    :disabled="action ==='view'"
                    v-model="current.info"/>
        </el-form-item>
        <!-- $t('pages.carousel.image') -->
        <el-form-item  prop="imageUrl">
          <el-upload
            action="1"
            list-type="picture-card"
            :auto-upload="true"
            :show-file-list="false"
            :on-change="uploadChange">
            <div v-if="imageUrl"  class="imageUrl">
              <img :src="imageUrl" class="avatar">
              <span class="imageName">{{ imageName }}</span>
            </div>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

            <!-- <el-button size="small" type="primary">{{ $t('pages.carousel.upImage') }}</el-button> -->
          </el-upload>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click.prevent="okBtn('dialogForm')">{{$t('pages.help.ok')}}</el-button>
        <el-button type="danger" @click="onClose">{{$t('pages.help.cancel')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import carouselTable from './carouselTable'
  export default {
    data () {
      return {
        area: 0,
        status: 1,
        // 搜索条件
        formInline: {
          keyword: ''
        },
        searchInput: '',

        visible: false,
        action: 'news',
        dialogData: '',
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 1,

        thatSelectArr: [],
        // 当前选择的
        current: {
          imageUrl:''
        },
        // 添加/修改数据规则
        dataRule: {
          name: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
          ],
          sort: [
            { required: true, message: '排序不能为空', trigger: 'blur' }
          ],
          info: [
            { required: true, message: '描述不能为空', trigger: 'blur' }
          ],
          imageUrl: [
            { required: true, message: '图片未上传', trigger: 'change' }
          ]
        },
        typeoOtions: [
          {
            value: '1',
            label: '2'
          }
        ],
        AzOptions: [
          {
            value: '1',
            label: '2'
          }
        ],
        // 图片
        imageUrl: '',
        imageName: ''
      }
    },
    created () {
      const {query} = this.$route
     this.pageIndex = query.pageNo ? parseInt(query.pageNo) : 1
     this.formInline.keyword = query.name ? query.name : ''
      this.getDataList();
    },
    mounted () {},
    methods: {
      getDataList () {
        // 获取表格数据
        let {} = this.current
        let jsonData = {
          name: this.searchInput,
          pageNo: this.pageIndex -1,
          pageSize: this.pageSize
        }
        this.$router.push({
          path: 'sys-manage-carousel',
          query: Object.assign({}, jsonData, {pageNo: this.pageIndex})
        })
        this.$http({
          url: this.$http.adornUrl('/sys/systemsowingmap/querySystemSowingMapList'),
          method: 'post',
          data: this.$http.adornData(jsonData)
        }).then( data => {
          let {page:{list,totalCount}} = data
          this.dataList = list
          this.totalPage = totalCount
        })

      },

      /* 弹窗 */
      newHandle () {
        // 新增打开
        this.action = 'newsAc'
        this.visible = true
      },
      editHandle (data) {
        // 编辑打开
        this.action = 'edit'
        this.dialogData = data
        this.visible = true

        
      },

      /* 新增、编辑 */
      okBtn (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
    
            let {info, name, sort,imageUrl} = this.current
            let action = this.action
            if (action === 'newsAc') {
              // 新增数据
              let jsonData = {
                name: name, //名称
                // countryCode: '',//国家code
                content: imageUrl.name,//图片url
                xh: sort,//序号
                description: info//描述
              }
              this.$http({
                url: this.$http.adornUrl('/sys/systemsowingmap/saveSystemSowingMap'),
                method: 'post',
                data: this.$http.adornData(jsonData)
              }).then( data => {
                this.$message({
                  type: 'success',
                  message: '操作成功'
                })
                this.getDataList()
                this.visible = false
              })


            } else {
              // 编辑数据
            }
          } else {
            this.$message({
              type: 'error',
              message: '请求失败，请重新请求'
            })
            return false;
          }
        });
      },

      uploadChange (file, fileList) {
        if (file.status === 'ready') {
          this.imageUrl = URL.createObjectURL(file.raw);
          this.imageName = file.name
          this.current.imageUrl = file
          this.$refs['dialogForm'].validateField('imageUrl')
          // this.$refs['dialogForm'].clearValidate('imageUrl')
        }
        // 上传图片
        // URL.createObjectURL(file.raw)
      },

      //  弹窗关闭清除上次的校验结果
      onClose () {
        this.$refs['dialogForm'].resetFields()
        // this.$refs['dialogForm'].clearValidate()
        this.visible = false
        this.imageUrl = ''
      },

      /* 弹窗结束 */

      releaseHandle (data) {
        // 替换
        console.log(data)
      },
      deleteHandle (id) {
        // 删除后刷新页面

        this.$confirm('确定删除当前轮播图？', '', {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          // const id = data
          // todo 删除请求操作
          this.$http({
            url: this.$http.adornUrl('/sys/systemsowingmap/deleteSystemSowingMapById'),
            method: 'post',
            data: this.$http.adornData({
              id: id
            })
          }).then( data => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getDataList()
            // this.visible = false
          })
        })
      },
      startHandle (data) {
        // 启动后刷新页面
        this.$confirm('确定启用当前轮播图？', '', {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/systemsowingmap/enableOrDisSystemSowingMap'),
            method: 'post',
            data: this.$http.adornData({
              id: data.id,
              state: '0' //0启用，1停用
            })
          }).then( data => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getDataList()
          })
        })
      },
      stopHandle (data) {
        // 停用后刷新页面
        this.$confirm('确定停用当前轮播图？', '', {
          confirmButtonText: '确认',
          cancelButtonText: '取消'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/sys/systemsowingmap/enableOrDisSystemSowingMap'),
            method: 'post',
            data: this.$http.adornData({
              id: data.id,
              state: '1' //0启用，1停用
            })
          }).then( data => {
            this.$message({
              type: 'success',
              message: '操作成功'
            })
            this.getDataList()
          })
        })
      },

      currentChange (page) {
        // 当前页
        console.log(page)
      },

    },
    components: {
      'carousel-table': carouselTable
    }
  }
</script>

<style lang="scss" scoped>
  .smallWin{
    width:30%;
    display: inline-block;
    padding-left: 28px;
  }
  .avatar{
    width:148px;
    height:52px;
  }
  .imageUrl{
    line-height: normal;
    position: relative;
    .imageName{
      position: absolute;
      left: 111%;
      top: 20px;
    }
  }


</style>
<style lang="scss">
.carouselDialog{
  .el-upload--picture-card{
    width:148px;
    height:52px;
    line-height:59px;
  }
}

</style>

